<script setup lang="ts">
// {
//             type: 'line',
//             num: 3,
//             gap: '30rpx',
//             style: ['width: 200rpx;', null, 'width:400rpx;']
//         }
import { onMounted, ref } from "vue";
const skeletonsRef = ref()
const width = ref()
const skeleton = ref({
    loading: true,
    skeleton: null as any
});
onMounted(() => {
    if (!skeletonsRef?.value) return
    width.value = skeletonsRef?.value?.$el.offsetWidth / 2 - 10
    skeleton.value.skeleton = [
        {
            type: "flex",
            num: 4,
            children: [
                {
                    type: "custom",
                    style: `width: ${width.value}px;height:${width.value}px;margin: 0 5px;`,
                },
                {
                    type: "custom",
                    style: `width: ${width.value}px;height:${width.value}px;margin: 0 5px;`,
                },
            ],
        },
    ]
})
</script>

<template>
    <view class="skeletons-dom" ref="skeletonsRef">
        <uv-skeletons v-if="!!width" :loading="skeleton.loading" :skeleton="skeleton.skeleton"></uv-skeletons>
    </view>
</template>
<script></script>
